<template>
    <div class="address-card" @click="changeIndex">
        <el-card class="box-card" :shadow="shadow">
            <div class="top">
                <div>{{ addressItem.address }}</div>
                <div>({{ addressItem.name }} 收)</div>
            </div>
            <div class="detail-address">
                <!-- <span>龙华龙华华联社区鲤鱼塘18栋</span> -->
                <span>{{ addressItem.phone }}</span>
                <transition name="modify">
                    <i @click="modify" class="modify" v-if="index === currentIndex">修改</i>

                </transition>
            </div>
        </el-card>
        <transition name="confirm">
            <div class="div" v-if="index === currentIndex">已选择</div>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'AddressCard',
    components: {
    },
    mixins: [],
    props: ['index', 'currentIndex', 'addressItem'],
    data() {
        return {
            shadow: 'hover',//always never hover
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.$emit('getDefaultAddress')
    },
    methods: {
        modify() {
            const obj = {
                true: true,
                row: this.addressItem,
                title: '修改地址信息'
            }
            this.$bus.$emit('add', obj)
        },
        changeIndex() {
            this.$emit('changeIndex')
        }
    }
};
</script>
<style lang='less' scoped>
.address-card {
    position: relative;
    width: 24%;
    margin: 5px;
    cursor: pointer;

    .el-card__body {
        padding: 0;
    }

    .top {
        font-size: 13px;
        color: #7f7f7f;
        font-weight: 600;
        border-bottom: 1px solid #c0c0c0;

        div {
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
        }
    }

    .detail-address {
        font-size: 13px;
        color: #7f7f7f;
        padding: 5px 0;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        i {
            color: #c97;
            font-size: 12px;
            cursor: pointer;
        }

        i:hover {
            text-decoration: underline;
        }
    }

    .div {
        position: absolute;
        color: red;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        line-height: 70px;
        font-weight: bold;
        text-align: center;
        border: 1px dashed red;
        z-index: 20;
        right: 10px;
        bottom: 10px;
        opacity: .5;
        transform: rotate(-30deg);
    }

    .confirm-enter-from {
        transform: scale(1);
    }

    .confirm-enter-active {
        transition: all 0.3s;
    }

    .confirm-enter-to {
        transform: scale(1.2);
    }

    .modify {
        position: absolute;
        left: 20px;
        top: 78px;
    }



}
</style>